<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" th:href="@{/static/bootstrap.min.css}">
    <title>OpenLearning</title>
</head>
<body>

<div class="container">
    <div th:replace="all_module::navbar"></div>

    <div th:replace="all_module::WorkReciteNavlist('nav-link active','nav-link','nav-link','nav-link')"></div>

    <div class="alert alert-primary" role="alert">
        单词文件应该是一个txt文件，内由单词组成，每个单词为一行，例如：<br>
    </div>

    <div class="row">
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">word.txt</h6>
                    a<br>
                    apple<br>
                    abandon<br>
                    ...<br>
                </div>
            </div>
        </div>
        <br><br>
        <div class="col-12 col-md-6">
            <form th:action="@{/word/receiveCSVWordDict.do}" method="post" enctype="multipart/form-data">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">上传的单词表名称</span>
                    </div>
                    <input name="bookNickname" required type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlFile1">单词文件上传</label>
                    <input name="file" required type="file" class="form-control-file" id="exampleFormControlFile1" accept=".txt">
                </div>
                <button type="submit" class="btn btn-primary">上传</button>
            </form>
        </div>
    </div>
    <br><br>
    <table class="table" th:if="${session.names}">
        <thead class="thead-dark">
        <tr>
            <th scope="col">单词表</th>
            <th scope="col">状态</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="map : ${session.names}">
            <th th:text="${map.get('nickname')}">1</th>
            <td th:if="${map.get('value')}=='true'"><span class="badge badge-success">上传成功</span></td>
            <td th:if="${map.get('value')}=='false'"><span class="badge badge-primary">文件处理中</span></td>
            <td th:if="${map.get('value')}=='lose'"><span class="badge badge-danger">上传失败</span></td>
        </tr>
    </table>

</div>


<!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script th:src="@{/static/jquery.slim.min.js}"> </script>
<script th:src="@{/static/bootstrap.bundle.min.js}"></script>
<script th:src="@{/static/vue2.js}"></script>
<script>


</script>


</body>
</html>